<template>
  <div class="center_bottom1">
    <div class="map-3d-container" ref="mapContainer">
      <Echart
        :options="options"
        id="bottomLeftChart"
        class="echarts_bottom1"
        :mapJson="mapJson"
        :isResize="false"
        height="380px"
      ></Echart>
    </div>
  </div>
</template>

<script>
import guianArea from "@/utils/map/guianArea.json";
import one from "@/assets/imgs/图层 10.png";
import two from "@/assets/imgs/Group.png";
import three from "@/assets/imgs/Group 2.png";
import four from "@/assets/imgs/mapicon.png";
import {middleBottomOne} from "@/api/modules";


export default {
  data() {
    return {
      options: {},
      // mapJson: null,
      mapJson: guianArea,
      rotationAngle: 0, // 旋转角度
      isRotating: false, // 是否正在旋转
      rotationSpeed: 0.06, // 旋转速度
      rotationDirection: 1, // 旋转方向 1为正向，-1为反向
      maxRotationAngle: 15, // 最大旋转角度
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    dateType: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    // this.getGeojson();
  },
  mounted() {
    this.getData()
    // this.init(this.data);
    // this.startRotation();
  },
  beforeUnmount() {
    this.stopRotation();
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
    dateType: {
      handler() {
        this.init(this.data);
      },
      deep: true,
    },
  },
  methods: {
    getData(){
      middleBottomOne({}).then(res=>{
        console.log("地图",res[0].address)
        this.init(res[0].address)
        this.startRotation();
      });
    },
    // init() {
    init(mapDate) {

      // mapDate=[newData[0],newData[1]]
      // const mapDate = ['贵阳市', '六盘水市', '遵义市'];
      this.options = {
        geo: {
          show: false,
          map: "bd",
          silent: true,
          roam: false,
          z: 0,
          itemStyle: {
            normal: {
              areaColor: "#9ec8fa",
              shadowColor: "#093566",
              shadowBlur: 8,
              shadowOffsetX: 3,
              shadowOffsetY: 3,
              borderColor: "rgba(147, 235, 248, .8)",
              borderWidth: 1,
            },
          },
        },
        series: [
          {
            type: "map",
            roam: false,
            top: 0,
            aspectScale: 1.6,
            // 添加3D效果到地图本身
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, .8)",
                borderWidth: 1,
                areaColor: "#3c7dcf",
                shadowColor: "#093566",
                shadowBlur: 8,
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                // 添加3D立体效果
                emphasis: {
                  areaColor: "#4a8dd8",
                  shadowBlur: 12,
                  shadowOffsetX: 5,
                  shadowOffsetY: 5,
                }
              },
              emphasis: {
                disabled: true,
                areaColor: "#4a8dd8",
                shadowBlur: 12,
                shadowOffsetX: 5,
                shadowOffsetY: 5,
              },
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                formatter: function (params) {
                  // 每6个字符插入换行符
                  const name = params.name.replace(/(.{6})/g, "$1\n")
                  let text = `{label|${name}} `
                  if (name === '贵阳市') {
                    text += `{four| } `
                  }
                  if (mapDate[0] === params.name) {
                    text += `{one| }`
                  }else if (mapDate[1] === params.name) {
                    text += `{two| }`
                  }else if (mapDate[2] === params.name) {
                    text += `{three| }`
                  }
                  return text
                },
                rich: {
                  label: {
                    verticalAlign: "middle",
                  },
                  one: {
                    height: 30,
                    width: 30,
                    backgroundColor: {
                      image: one, // 图片URL
                    },
                  },
                  two: {
                    height: 30,
                    width: 30,
                    backgroundColor: {
                      image: two, // 图片URL
                    },
                  },
                  three: {
                    height: 30,
                    width: 30,
                    backgroundColor: {
                      image: three, // 图片URL
                    },
                  },
                  four: {
                    height: 20,
                    width: 20,
                    backgroundColor: {
                      image: four, // 图片URL
                    },
                  },
                },
              },
              emphasis: {
                disabled: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            select: {
              disabled: true,
            },
            zoom: 1,
            map: "bd",
          },
        ],
      };
    },
    startRotation() {
      this.isRotating = true;
      this.rotateMap();
    },
    stopRotation() {
      this.isRotating = false;
    },
    rotateMap() {
      if (!this.isRotating) return;
      
      this.rotationAngle += this.rotationSpeed * this.rotationDirection;
      
      // 当达到最大角度时，改变旋转方向
      if (this.rotationAngle >= this.maxRotationAngle) {
        this.rotationAngle = this.maxRotationAngle;
        this.rotationDirection = -1;
      } else if (this.rotationAngle <= -this.maxRotationAngle) {
        this.rotationAngle = -this.maxRotationAngle;
        this.rotationDirection = 1;
      }
      
      this.updateMapTransform();
      
      requestAnimationFrame(() => {
        this.rotateMap();
      });
    },
    updateMapTransform() {
      if (this.$refs.mapContainer) {
        this.$refs.mapContainer.style.transform = `
          perspective(1000px) 
          rotateX(15deg) 
          rotateY(${this.rotationAngle}deg)
          translateZ(0)
        `;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom1 {
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
 
  .map-3d-container {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    
    .echarts_bottom1 {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      transform-style: preserve-3d;
      // 添加3D地图效果
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)) 
              drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    }
  }
}

// 为地图添加3D立体效果
:deep(.echarts_bottom1) {
  canvas {
    // 添加立体阴影和光照效果
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)) 
            drop-shadow(-1px -1px 2px rgba(255, 255, 255, 0.1));
    border-radius: 4px;
  }
}
</style>
